<template>
    <div>
        <van-nav-bar title="食谱" style="background-color: #FFD85F;" class="headera">
            <template #right>
                <van-icon name="chat-o" size="18" color="#f00" />
            </template>
        </van-nav-bar>

        <van-tree-select height="100vh" :items="items" :main-active-index.sync="active" @click-nav="clickNav">
            <template #content>
                <van-grid>
                    <van-grid-item v-for="(item, index) in currentContent" :key="index" class="category-item"
                        @click="FunnelView(item)">
                        <img :src="item.picUrl" class="category-image" />
                        <div>{{ item.text }}</div>
                    </van-grid-item>
                </van-grid>
            </template>
        </van-tree-select>
    </div>
</template>

<script>
import axios from 'axios';

export default {
    data() {
        return {
            active: this.$route.params.categoryIndex || 0, // 当前选中的分类
            items: [], // 主分类数据
            contentData: [], // 子分类数据
            allCategories: [], // 用于保存所有分类数据的临时存储
        };
    },
    computed: {
        // 根据当前激活的标签获取对应的内容
        currentContent() {
            return this.contentData[this.active] || [];
        },
    },
    created() {
        // 初始化时加载主分类数据
        this.loadCategories();
    },
    methods: {
        FunnelView(item) {
            axios({
                url: "http://localhost:8081/wx/recipes/ingredientsid?ingredientId=" + item.id
            }).then(res => {
                if (res.data.data != null) {
                    this.$router.push({ name: 'FoodDetails', params: { id: res.data.data.id } });
                } else {
                    this.$toast.fail("该分类暂时无法点击");
                }
            })
            console.log(item)
        },
        // 点击导航分类时
        clickNav(index) {
            this.active = index;
            const selectedCategory = this.allCategories[index];

            if (selectedCategory) {
                // 如果内容已缓存，不重复加载
                if (this.contentData[this.active]) return;

                // 显示加载动画
                this.$toast.loading({
                    message: '加载中...',
                    forbidClick: true,
                    duration: 0, // 手动关闭
                });

                // 加载子分类数据
                this.loadSubCategories(selectedCategory.id).finally(() => {
                    // 加载完成后关闭 loading
                    this.$toast.clear();
                });
            }
        },

        // 加载主分类数据
        loadCategories() {
            axios({
                url: 'http://localhost:8081/wx/ingredients/index'
            }).then((response) => {
                if (response.data.errno === 0) {
                    this.allCategories = response.data.data.ingredientsList;
                    this.items = this.mapToTreeSelectItems(this.allCategories);

                    this.$nextTick(() => {
                        // 等 items 渲染完毕后再去加载子分类
                        const selectedCategory = this.allCategories[this.active];
                        if (selectedCategory) {
                            this.loadSubCategories(selectedCategory.id);
                        }
                    });
                } else {
                    console.error('获取分类数据失败:', response.data.errmsg);
                }
            }).catch((error) => {
                console.error('请求失败:', error);
            });
        },



        // 加载子分类数据
        loadSubCategories(categoryId) {
            return axios({
                url: `http://localhost:8081/wx/ingredients/current?id=${categoryId}`
            }).then((response) => {
                if (response.data.errno === 0) {
                    const subIngredients = response.data.data.currentSubIngredients || [];
                    this.$set(this.contentData, this.active, this.mapToContentData(subIngredients));
                } else {
                    console.error('获取子分类数据失败:', response.data.errmsg);
                }
            }).catch((error) => {
                console.error('请求失败:', error);
            });
        },


        // 将主分类数据转换为树形选择器格式
        mapToTreeSelectItems(categories) {
            return categories.map((category) => ({
                id: category.id,
                text: category.name,
                icon: category.iconUrl || 'photo-o',
            }));
        },

        // 将子分类数据转换为内容展示格式
        mapToContentData(subIngredients) {

            return subIngredients.map((sub) => ({
                id: sub.id,
                text: sub.desc,
                picUrl: sub.picUrl || 'default-image-url.jpg', // 如果没有图片，使用默认图片
            }));
        },
    },
};
</script>

<style scoped>
.headera {
    .van-nav-bar__title {
        color: #fff;
        font-weight: bold;
        font-size: 1.2em;
    }
}

/* 使用Grid布局设置列数，强制每行两列 */
.van-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* 保证每行两列 */
    gap: 10px;
    /* 设置项之间的间距 */
    padding: 10px;
}

/* 设置每个分类项的样式 */
.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background-color: #fff;
    /* 为卡片设置背景色 */
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    /* 为卡片添加阴影效果 */
    padding: 10px;
    transition: transform 0.2s ease-in-out;
    /* 卡片的过渡效果 */
}

.category-item:hover {
    transform: scale(1.05);
    /* 鼠标悬停时放大卡片 */
}

/* 图片样式 */
.category-image {
    width: 100%;
    /* 设置图片宽度为100% */
    height: 80px;
    /* 设置图片固定高度 */
    object-fit: cover;
    /* 保持图片的宽高比，裁剪图片以适应 */
    border-radius: 6px;
    margin-bottom: 10px;
}

.van-grid-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 10px;
}
</style>
